<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户首页</title>
    <script src="/static/jquery-3.6.0.min.js"></script>
    <style>
        #top-video{
            margin-top: 62px;
        }
    </style>
</head>
<body>
<div id="head"></div>
<div id="top-video">
    <div>
        <video loop width="100%" height="162px" AUTOPLAY MUTED
               style="object-fit: cover; transform: scale(1) translate(0px, 0px) rotate(0deg);"
               src="/static/video/0ace330c-5e7d-4539-9ae7-efe5c24c17c2.webm">
        </video>
    </div>
</div>
<div class="album py-5 bg-light">
    <div class="container">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
            <div class="col">
                <div class="card shadow-sm">
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                         xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder:123"
                         preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
                        <rect width="100%" height="100%" fill="#55595c"/>
                        <text x="50%" y="50%" fill="#eceeef" dy=".3em">这里放视频内容</text>
                    </svg>

                    <div class="card-body">
                        <p class="card-text">引人注目的视频标题</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮1</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮2</button>
                            </div>
                            <small class="text-muted">播放量</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card shadow-sm">
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                         xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder:123"
                         preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
                        <rect width="100%" height="100%" fill="#55595c"/>
                        <text x="50%" y="50%" fill="#eceeef" dy=".3em">这里放视频内容</text>
                    </svg>

                    <div class="card-body">
                        <p class="card-text">这应该是介绍</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮1</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮2</button>
                            </div>
                            <small class="text-muted">播放量</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card shadow-sm">
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                         xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder:123"
                         preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
                        <rect width="100%" height="100%" fill="#55595c"/>
                        <text x="50%" y="50%" fill="#eceeef" dy=".3em">这里放视频内容</text>
                    </svg>

                    <div class="card-body">
                        <p class="card-text">这应该是介绍</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮1</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮2</button>
                            </div>
                            <small class="text-muted">播放量</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card shadow-sm">
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                         xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder:123"
                         preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
                        <rect width="100%" height="100%" fill="#55595c"/>
                        <text x="50%" y="50%" fill="#eceeef" dy=".3em">这里放视频内容</text>
                    </svg>

                    <div class="card-body">
                        <p class="card-text">这应该是介绍</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮1</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮2</button>
                            </div>
                            <small class="text-muted">播放量</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card shadow-sm">
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                         xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder:123"
                         preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
                        <rect width="100%" height="100%" fill="#55595c"/>
                        <text x="50%" y="50%" fill="#eceeef" dy=".3em">这里放视频内容</text>
                    </svg>

                    <div class="card-body">
                        <p class="card-text">这应该是介绍</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮1</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮2</button>
                            </div>
                            <small class="text-muted">播放量</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card shadow-sm">
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                         xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder:123"
                         preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
                        <rect width="100%" height="100%" fill="#55595c"/>
                        <text x="50%" y="50%" fill="#eceeef" dy=".3em">这里放视频内容</text>
                    </svg>

                    <div class="card-body">
                        <p class="card-text">这应该是介绍</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮1</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮2</button>
                            </div>
                            <small class="text-muted">播放量</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card shadow-sm">
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                         xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder:123"
                         preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
                        <rect width="100%" height="100%" fill="#55595c"/>
                        <text x="50%" y="50%" fill="#eceeef" dy=".3em">这里放视频内容</text>
                    </svg>

                    <div class="card-body">
                        <p class="card-text">这应该是介绍</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮1</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮2</button>
                            </div>
                            <small class="text-muted">播放量</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        $("#head").load("head");
    });
    function initPage(){
        $.post("/user/initPage", function (data){

        });
    }
</script>
</html>

<!--rel="stylesheet" th:src="@{/static/jslib/index.js}" src="/static/jslib/index.js"-->